<template>
  <div class="department">
    <div class="header">
      <div class="header-1">
        <div class="header-1-1">
          <div class="tou"></div>
          <span>查询条件</span>
        </div>
      </div>
      <!-- <div class="form">
        <el-form :inline="true" size="mini" :data="formInline" class="demo-form-inline">
          <el-form-item label="部门状态">
            <el-select clearable v-model="formInline.status" placeholder="部门状态">
              <el-option label="正常" value="yes"></el-option>
              <el-option label="停用" value="no"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="tabcur()">查询</el-button>
            <el-button type="warning" @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div> -->
      <div class="hackhome"></div>
      <!-- 新增弹窗--根 -->
      <el-dialog title="系统管理-添加部门根" :visible.sync="dialogVisibles" :close-on-click-modal="false" width="40%">
        <div class="header-1">
          <div class="header-1-1-1">
            <div class="tou"></div>
            <span>添加部门</span>
          </div>
        </div>
        <el-form size="mini" :data="lists" :model="ruleFormA" status-icon ref="ruleFormA" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="ruleFormA.deptName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="部门描述" prop="deptDesc">
            <el-input v-model="ruleFormA.deptDesc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="warning" @click="adddeparts">确定</el-button>
            <el-button size="mini" type="primary" @click="dialogVisibles=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 编辑弹窗 -->
      <el-dialog title="系统管理-修改部门" :visible.sync="xiugai" :close-on-click-modal="false" width="40%">
        <div class="header-1">
          <div class="header-1-1-1">
            <div class="tou"></div>
            <span>修改部门</span>
          </div>
        </div>
        <el-form size="mini" :data="lista" :model="ruleForms" status-icon ref="ruleForms" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="上级部门" prop="deptId">
            <el-input v-model="ruleFormss.parentDeptName" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="ruleFormss.deptName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="部门描述" prop="deptDesc">
            <el-input v-model="ruleFormss.deptDesc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="warning" @click="getedit">确定</el-button>
            <el-button size="mini" type="primary" @click="xiugai=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 部门列表 -->
      <div class="header-1">
        <!-- 部门列表新增 -->
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>部门列表</span>
          </div>
          <div class="tuo-3">
            <!-- 打开根 -->
            <el-button type="warning" size="mini" @click="dialogVisibles = true">新增</el-button>
          </div>
        </div>
        <!-- 部门列表 -->
        <div class="table">
          <el-table border size="mini" ref="multipleTable" :data="list" :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }" row-key="deptId" default-expand-all :tree-props="{ children: 'children' }" @expand-change="openDetails"
            :default-sort="{ prop: 'deptSort' }">
            <el-table-column prop="deptName" label="部门名称" width="220px">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100px">
              <template slot-scope="scope">
                <template>
                  <el-tag size="small" :type="scope.row.status == 'no' ? 'danger' : 'primary'">{{ scope.row.status == "no" ? "停用" : "正常" }}</el-tag>
                </template>
              </template>
            </el-table-column>

            <el-table-column prop="createTime" label="创建时间" width="220px">
              <template slot-scope="scope">
                {{ show(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="ancestors" label="部门描述" />
            <el-table-column prop="name" label="操作" width="220">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="myid(scope.row), (xiugai = true)">
                  修改
                </el-button>
                <el-button type="primary" size="mini" @click="parentData(scope.row), (dialogVisible = true)" v-if="scope.row.parentId==null">
                  新增
                </el-button>
                <el-popconfirm title="确定执行该操作吗?" @confirm="modifybanksrepeat">
                  <el-button size="mini" type="danger" style="margin-left: 8px;" slot="reference" @click="handleDelete( scope.row)">
                    {{ scope.row.status == "no" ? "启用" : "停用"}}
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 新增列表弹窗--支 -->
        <el-dialog title="系统管理-添加部门" :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%">
          <div class="header-1">
            <div class="header-1-1-1">
              <div class="tou"></div>
              <span>添加部门</span>
            </div>
          </div>
          <el-form size="mini" :data="lists" :model="ruleForm" status-icon ref="ruleForm" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="ruleForm.deptName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门描述" prop="deptDesc">
              <el-input v-model="ruleForm.deptDesc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="warning" @click="adddepart('ruleForm')">确定</el-button>
              <el-button size="mini" type="primary" @click="dialogVisible=false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "department",
    data() {
      //部门状态
      return {
        statusNum: "",
        deactivatea: "",
        formInline: {
          deptName: "",
          status: "yes",
        },
        departmentList: [],
        lazy: true,
        deactivate: false,
        value: "",
        ruleForm: {
          parentDeptId: "1",
          deptName: "",
          deptDesc: "",
          deptSort: "",
        },
        ruleFormA: {
          parentDeptId: "0",
          deptName: "",
          deptDesc: "",
          deptSort: "",
        },
        ruleForms: {
          deptId: "",
          deptName: "",
          deptDesc: "",
          deptSort: "",
          parentDeptId: "",
        },
        // 修改编辑
        ruleFormss: {
          deptId: "",
          deptName: "",
          deptDesc: "",
          deptSort: "",
          parentDeptId: "",
          parentDeptName: "",
        },
        list: [],
        lists: [],
        lista: [],
        shu: [],
        sousuo: [],
        //添加部门
        dialogVisible: false,
        dialogVisibles: false,
        //修改部门
        xiugai: false,
        formLabelAlign: {
          name: "",
          checked: true,
        },
        radio: 3,
        checked: false,
        sizeForm: {
          name: "",
          region: "",
        },
        //部门状态
        DepartmentStatus: "1",
        //上级部门
        value: "",
      };
    },
    methods: {
      // 修改部门停用启用状态
      handleDelete(row) {
        console.log(row)
        this.deactivatea = row.deptId
        this.statusNum = row.status
      },
      modifybanksrepeat() {
        this.$axios
          .postedit({
            deptId:this.deactivatea ,
            status:this.statusNum == "no" ? "yes" : "no"
          })
          .then((res) => {
            console.log(res);
            if (res.code == "00000") {
              this.tabcur();
            }
          });
      },
      // 获取父数据
      parentData(a) {
        this.ruleForm.parentDeptId = a.deptId;
      },
      myid(a) {
        console.log(a)
        this.$axios
          .getDeptInfo({
            id:a.deptId,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "00000") {
                this.ruleFormss.deptName = res.data.deptName
                this.ruleFormss.deptDesc =  res.data.ancestors 
                this.ruleFormss.deptId =  res.data.deptId 
                this.ruleFormss.parentDeptName =  res.data.parentName 
            }
          });
      },
     
      // 新增表单验请求证根
      adddeparts() {
        console.log('调用参数')
        // 如果你的条件为空 提示你不能为空 并返回 如果你的查询条件不为空 则掉接口
        if (this.ruleFormA.deptName == "" || this.ruleFormA.deptDesc == "") {
          if (this.ruleFormA.deptName == "") {
              this.$message({
                message: '部门名称不能为空',
                type: 'warning'
              });
          } else {
             this.$message({
                message: '部门描述不能为空',
                type: 'warning'
              });
          }
        } else {
          console.log(this.ruleFormA.parentDeptId, this.ruleFormA.deptName,
            this.ruleFormA.deptDesc,
            this.ruleFormA.deptSort)
          this.$axios
            .getadd({
              parentDeptId: "",
              deptName: this.ruleFormA.deptName,
              ancestors: this.ruleFormA.deptDesc,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.dialogVisibles = !this.dialogVisibles;
                this.tabcur()
                this.ruleFormA = {}
              }
            });
        }
      },
      // 时间显示
      show(val) {
        var val1 = val.split('.')
        var val2 = val1[0].split('T').join(' ')
        return val2
      },
      // 新增表单验请求证支
      adddepart() {
        console.log("我也是新增数")
        //添加部门
        if (this.ruleForm.deptName == "") {
          this.$confirm('部门名称不能为空', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        } else if (this.ruleForm.deptDesc == "") {
          this.$confirm('部门描述不能为空', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        } else {
          this.dialogVisible = false;
          this.$axios
            .getadd({
              parentId: String(this.ruleForm.parentDeptId),
              deptName: this.ruleForm.deptName,
              ancestors: this.ruleForm.deptDesc,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.ruleForm = {}
                this.tabcur()
                console.log(res.code);
              }
            });
        }
      },
      // 重置
      resetForm() {
        this.formInline.deptName = "";
        this.formInline.status = "";
        this.tabcur()
      },
      onSubmit() {
        console.log("submit!");
      },
      handleChange(value) {
        console.log(value);
      },
      // 二级部门
      openDetails(row) {
        console.log(row);
      },
      getChildNode(node) {
        console.log(node)
        node.children = [];
        for (let index = 0; index < node.sysDeptBOList.length; index++) {
          var tmpNode = node.sysDeptBOList[index];
          tmpNode.id = tmpNode.deptId;
          tmpNode.name = tmpNode.deptName;
          node.children.push(tmpNode);
        }
        for (let index = 0; index < node.sysDeptBOList.length; index++) {
          var childNode = node.sysDeptBOList[index];
          this.getChildNode(childNode);
        }
      },
      // 部门列表
      tabcur() {
        this.$axios
          .getDepartmentList({
            // deptName: this.formInline.deptName,
            status: null,
          })
          .then((res) => {
            this.list = [];
            console.log(res)
            if (res.code == "00000") {
              var lstData = JSON.parse(JSON.stringify(res.data));
              console.log(lstData);
              for (let index = 0; index < lstData.length; index++) {
                var node = lstData[index];
                node.children = [];
                for (let i = 0; i < node.sysDeptBOList.length; i++) {
                  var tmpNode = node.sysDeptBOList[i];
                  
                  tmpNode.id = tmpNode.deptId;
                  tmpNode.name = tmpNode.deptName;
                  tmpNode.pname = node.deptName;
                  node.children.push(tmpNode);
                }
                this.getChildNode(node);
                this.list.push(node);
              }
              console.log(this.list);
            }
          });
      },
      // 修改部门
      getedit() {
        this.xiugai = false;
        this.$axios
          .postedit({
            deptId: String(this.ruleFormss.deptId),
            deptName: this.ruleFormss.deptName,
            ancestors: this.ruleFormss.deptDesc,
            deptSort: String(this.ruleFormss.deptSort),
            parentId: String(this.ruleFormss.parentDeptId),
          })
          .then((res) => {
            console.log(res);
            if (res.code == "00000") {
               this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.tabcur();
            }
          });
      },
      // 搜索部门getlist
      getlist() {
        this.$axios
          .getlist({
            deptName: String(this.formInline.deptName),
            status: String(this.formInline.status),
          })
          .then((res) => {
            if (res.code == "200") {
              console.log(res);
              // tabcur(this.formInline.deptName, this.formInline.status);
              this.list = JSON.parse(JSON.stringify(res.data));
              // this.list.push(res.data)
              this.pageTotal = res.total
              console.log(this.list)
              // this.list.forEach((item) => {
              //   item.children = item.departmentList;
              // });
            }
          });
      },
      // 搜索
      onSubmit() {
        console.log("submit!");
      },
    },
    mounted() {
    this.tabcur()
    },
  };
</script>
<style scoped>
  .department {
    height: 100%;
    /* background-color: #f7f7f7; */
  }

  .header-1-1 {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    padding-top: 20px;
  }

  .header-1-1-1 {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    /* padding-top: 20px; */
  }

  .tou {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 25px;
  }

  .tuo {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    padding-top: 20px;
    justify-content: space-between;
    margin-right: 20px;
  }

  .tuo-1 {
    display: flex;
  }

  .tuo-2 {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 25px;
  }

  .invoice-9 {
    font-size: 11px;
  }

  .invoice {
    width: 97%;
    margin: auto;
    display: flex;
    height: 44px;
    margin-bottom: 20px;
    min-width: 1200px;
  }

  .invoice-1 {
    margin-right: 20px;
  }

  .invoice-2 {
    margin-left: 20px;
  }

  .hackhome {
    border-top: 1px solid #e0e0e0;
    width: 98%;
    margin-left: 20px;
  }

  .table {
    margin-left: 20px;
    margin-right: 20px;
  }

  .top-6 {
    display: flex;
  }

  .tou-3 {
    display: flex;
  }

  #selectForm>>>.el-form-item__label {
    font-size: 11px;
  }

  .pop-9 {
    font-size: 11px;
    width: 120px;
    padding-top: 5px;
  }

  .pop {
    margin-left: 20px;
  }

  .pop-1 {
    width: 400px;
  }

  .pop-1-2 {
    display: flex;
    margin-bottom: 20px;
  }

  .pop-3 {
    margin-left: 20px;
    margin-top: 40px;
  }

  .form {
    margin-left: 20px;
  }
</style>